<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			 可以看出，虽然尺寸，display水平都是一样的，结果却不在一个水平线上对齐
			 第一个span的底部和第二个span中的文字底部所对齐
			 而当给第二个span设置line-height为0的时候，两个框的垂直落差更大了
			*/
			.a{
				display: inline-block;
				width: 150px;
				height: 150px;
				background-color: #999999;
				font-family: "microsoft sans serif";
			}
			.b{
				line-height: 0;
			}
		</style>
	</head>
	<body>
		<span class="a"></span>
		<span class="a b">x-baseline</span>
	</body>
</html>
